import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons"
import { useDispatch, useSelector } from "react-redux"
import { updateCollapse } from "@/redux/modules/menu"
import { State } from "@/redux/interface"

const CollapseIcon = () => {
    const dispath = useDispatch()
    const { isCollapse } = useSelector((state:State) => state.menu)

    return (
        <div
            id="isCollapse"
            className="collapsed"
            onClick={() => {
                dispath(updateCollapse(!isCollapse))
            }}
        >
            {isCollapse ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </div>
    )
}

export default CollapseIcon